import { Button, Form, Space } from '@douyinfe/semi-ui';
import { debounce, identity, isEqual, isNumber, pickBy } from 'lodash';
import { useCallback, useMemo } from 'react';
import { IQueryParams } from '@/widgets/table-pagination';
import { usePageContext } from './context';
import { initialFilter } from './helper';

const DepartmentFilter = () => {
  const PageContext = usePageContext();
  const PageAction = useMemo(() => {
    return {
      addRecord: PageContext.addRecord,
      queryParams: PageContext.queryParams,
      setQueryParams: PageContext.setQueryParams,
    };
  }, [PageContext]);

  const applyFilter = useCallback(
    (values: any) => {
      const _queryParams: IQueryParams = {
        ...PageAction.queryParams,
        filter: { ...pickBy(values, identity), ...pickBy(values, isNumber) },
      };
      if (!isEqual(_queryParams, PageAction.queryParams)) {
        PageAction.setQueryParams({ ..._queryParams, pageNum: 1 });
      }
    },
    [PageAction.queryParams]
  );

  return (
    <Form
      labelPosition='left'
      className='gap-2 items-start'
      layout='horizontal'
      // onChange={(e) => {}}
      initValues={initialFilter}
      onSubmit={(values) => {
        applyFilter(values);
      }}
      onReset={() => applyFilter(initialFilter)}>
      <Form.Input
        field='name'
        label='部门名称'
        placeholder='模糊查询'></Form.Input>
      <Form.Input field='owner' placeholder='owner'></Form.Input>
      <Button theme='solid' htmlType='submit'>
        搜索
      </Button>
      <Button htmlType='reset'>重置</Button>
    </Form>
  );
};

export default DepartmentFilter;
